﻿<!doctype html>
<html>
<head>
<title>demodemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="styles/common.css" rel="stylesheet" />
</head>
<body>
<div class="header">
	<h1 class="logo"><a href="#">logo</a></h1>
	<a href="javascript:void(0)" class="btn">btn</a>
	<div class="tip">
		<h3>tit</h3>
		<div class="cont">
			cont
		</div>
	</div>
</div><!--/header-->

<div id="w" style="height:20px; background:#EEE;" class="s">w</div>
<div class="body">
	body
</div>


<script src="scripts/jquery-1.6.min.js"></script>
<script>
$(function(){
	$('.btn').bind('click',function(){
		iHidden('btn','tip');//参数为类，因为一个页面中这种弹出可能会有多个，保持通用性。
		$(this).next('.tip').toggle();
	});	
})

function iHidden(btn,tipCont){
	var isInArea = function(obj) {
		var $o =$(obj),
			ret = false;
		if ($o.hasClass(btn) || $o.hasClass(tipCont)){
			ret=true;
		}
		$(obj).parents().each(function() {
			if ($(this).hasClass(btn) || $(this).hasClass(tipCont)) {
				ret = true;
			}
		});
		return ret;
	}
	$('body').bind('click',function(e){
		var obj = e.target;
		if(!isInArea(obj)){
			$('.'+tipCont).hide();
		}
		return true;
	});
}

</script>
</body>
</html>